<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>研学机构列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/index.css">
    <script src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/index.js"></script>

</head>
<body>
<div class="x-nav">
          <span class="layui-breadcrumb">
            <a href="">首页</a>
            <a href="">演示</a>
            <a>
              <cite>导航元素</cite></a>
          </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body  layui-form">


                    <div class="layui-inline layui-show-xs-block">
                        <input type="text" name="name" placeholder="机构名称" autocomplete="off"
                               class="layui-input" id="title">
                    </div>



                    <div class="layui-inline layui-show-xs-block">
                        <button class="layui-btn" data-type="reload">搜索</button>
                    </div>
                </div>
                <div class="layui-card-header">
                    <button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon"></i>批量删除
                    </button>
                </div>
                <div class="layui-card-body layui-table-body layui-table-main">
                    <table class="layui-hide" id="test" lay-filter="test"></table>
                </div>
                <script type="text/html" id="barDemo">
                    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                </script>


            </div>
        </div>
    </div>
</div>
</body>
<script>
    layui.use(['laydate', 'form', 'table'], function () {
        var laydate = layui.laydate;
        var form = layui.form;
        var table = layui.table;
        var $ = layui.jquery;
        // 加载活动类型下拉列表



            table.render({
                elem: '#test'
                , url: '/admin/evaluation?opr=list'
                , toolbar: true
                , title: '研学机构表'
                , id: 'organizationbase'
                , cols: [[
                    {checkbox: true, fixed: true}
                    , {field: 'id', title: 'ID', width: 80, unresize: true, sort: true, totalRowText: '合计行'}
                    , {field: 'title', title: '活动名称', width: 120, edit: 'text'}
                    , {field: 'name',title:'机构名称',width: 150, edit: 'text'},
                    , {field: 'evaluate', title: '评价', width: 402, edit: 'text'}
                    , {
                        field: 'date',
                        title: '创建时间', width: 120,
                        edit: 'text',
                        sort: true,
                        templet: "<div>{{layui.util.toDateString(d.created,'yyyy-MM-dd')}}</div>"
                    }
                    , {field: 'nickname', title: '用户', width: 120,edit: 'text'}
                    , {fixed: 'right', width: 200, align: 'center', toolbar: '#barDemo'}

                ]]
                , page: {
                    layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                    , curr: 1 //设定初始在第 5 页
                    , groups: 2//只显示 1 个连续页码

                }
                , response: {
                    statusCode: 2000 //重新规定成功的状态码为 200，table 组件默认为 0
                }
                , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                    return {
                        "code": res.code, //解析接口状态
                        "msg": res.message, //解析提示文本
                        "count": res.total, //解析数据长度
                        "data": res.data//解析数据列表
                    };
                }
            });

            //数据渲染结束
            //监听行工具
            table.on('tool(test)', function (obj) {
                var data = obj.data;
                if (obj.event === 'detail') {
                    layer.msg('ID：' + data.id + ' 的查看操作');
                } else if (obj.event === 'del') {
                    layer.confirm('真的删除行么', function (index) {
                        layer.close(index);
                        $.getJSON("/admin/evaluation?opr=del&id="+ data.id, function (data) {
                             layer.msg(data.message)
                            if (data.flag){
                                obj.delete();
                            }
                        })
                        parent.location.reload();


                    });
                } else if (obj.event === 'edit') {
                     xadmin.open("机构详情","messysse-detail.html?"+data.id);

                }
            });

            // 监听全选
            form.on('checkbox(checkall)', function (data) {

                if (data.elem.checked) {
                    $('tbody input').prop('checked', true);
                } else {
                    $('tbody input').prop('checked', false);
                }
                form.render('checkbox');
            });



            // 按钮触发事件
            $('.layui-card .layui-btn').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
        //执行一个laydate实例
        laydate.render({
            elem: '#start' //指定元素
        });

        //执行一个laydate实例
        laydate.render({
            elem: '#end' //指定元素
        });


    });




        function delAll(argument) {
            var ids = [];

            // 获取选中的id
            $('tbody input').each(function (index, el) {
                if ($(this).prop('checked')) {
                    ids.push($(this).val())
                }
            });

            layer.confirm('确认要删除吗？' + ids.toString(), {icon: 3, title: '提示信息'}, function (index) {
                //捉到所有被选中的，发异步进行删除
                layer.msg('删除成功', {icon: 1});
                $(".layui-form-checked").not('.header').parents('tr').remove();
            });
        }
</script>

<script type="text/html" id="checkedTpl">

</script>
</html>